跳到主要内容

排版

所有的控件类型都支持排版。排版属性填写在layout属性内。

base.ui.panel {
    layout = {
        width = 100,
        height = 100,
    },
}

width​

控件的宽度。默认值-1。 如果大于等于0时，使用此值。否则宽度未定义，看情况计算出宽度： 如果配了ratio, 尝试使用ratio计算宽度； 如果横向stretch，则使用列宽； 如果是label控件，使用文本的宽度； 如果有设置图片，使用图片的宽度； 否则宽度根据子控件自动扩展。

width = 100

height​

控件的高度。默认值-1。高度未定义时，计算方式参考width。

height = 100

width_grow​

宽度扩展系数。

当父控件有剩余空间时，这个值会使控件宽度扩展，以占用剩余空间。0.5表示会占用50%的剩余空间。如果有多个控件想要扩展且总值超过1.0时，会根据各自的系数分配剩余空间。

width_grow = 0.5

height_grow​

高度扩展系数。扩展方式参考width_grow

height_grow = 0.5

width_shrink​

宽度收缩系数。当父控件的空间不足时，这个值会使控件宽度收缩，以减少溢出空间。0.5表示会收缩50%的溢出空间，如果有多个控件想要收缩且总值超过1.0时，会根据各自的系数及宽度分配溢出空间。

width_shrink = 0.5

height_shrink​

高度收缩系数。收缩方式参考width_shrink

height_shrink = 0.5

grow_width​

准备弃用，使用width_grow替代, 当width_grow > 0时，grow_width视为0。

宽度成长。当父控件有剩余空间时，这个值会使控件宽度变宽，以占用剩余空间。0.5表示会占用50%的剩余空间。如果有多个控件想要成长且总值超过1.0时，会根据各自的数字比例分配剩余空间。 当grow_width > 0时，width视为0。

grow_width = 0.5

grow_height​

准备弃用，使用height_grow替代, 当height_grow > 0时，grow_height视为0。

高度成长。成长方式参考grow_width。 当grow_height > 0时，height视为0。

grow_height = 0.5

margin​

外边框宽度。计算自己占用的空间时，会加上外边框。这个属性有2种格式：

margin = 5 -- 4周内边框均为5像素
margin = {
    top    = 2, -- 上边框为2像素
    bottom = 1, -- 下边框为1像素
    left   = 3, -- 左边框为3像素
    right  = 0, -- 右边框为0像素
}

padding​

内边框宽度。计算子控件空间时，会扣除掉内边框。这个属性有2种格式：

padding = 5 -- 4周内边框均为5像素
padding = {
    top    = 2, -- 上边框为2像素
    bottom = 1, -- 下边框为1像素
    left   = 3, -- 左边框为3像素
    right  = 0, -- 右边框为0像素
}

position_type​

定位方式。

position_type = 'relative' -- 相对定位。控件位置会直接使用position，且不再参与排版。
position_type = 'absolute' -- 绝对定位。当排版完成后，控件位置会根据position进行偏移。

position​

位置。这可能会导致控件重叠等现象，请谨慎使用。

position = {100, 50}

direction​

子控件排列方向。row表示横向排列，col表示竖向排列。

direction = 'row'

row_content​

子控件横向排列的方式。默认为center。若子控件设置了有效的row_self，则优先使用子控件的设置。

row_content = 'start'           -- 居左
row_content = 'center'          -- 居中
row_content = 'end'             -- 居右
row_content = 'space_between'   -- 均匀分布，两边对齐
row_content = 'space_around'    -- 均匀分布
row_content = 'stretch'         -- 将未定义宽度的子元素拉伸置列宽

col_content​

子控件竖向排列的方式。默认为center。若子控件设置了有效的col_self，则优先使用子控件的设置。

col_content = 'start'           -- 居上
col_content = 'center'          -- 居中
col_content = 'end'             -- 居下
col_content = 'space_between'   -- 均匀分布，两边对齐
col_content = 'space_around'    -- 均匀分布
col_content = 'stretch'         -- 将未定义高度的子元素拉伸置行高

row_self​

自己横向排列的方式。如果父控件的direction设置为了row，则此属性无效。

row_self = 'start'  -- 居左
row_self = 'center' -- 居中
row_self = 'end'    -- 居右
row_self = 'stretch'-- 宽度未定义的话将宽度拉伸至列宽

col_self​

自己竖向排列的方式。如果父控件的direction设置为了col，则此属性无效。

col_self = 'start'  -- 居上
col_self = 'center' -- 居中
col_self = 'end'    -- 居下
col_self = 'stretch'-- 高度未定义的话将高度拉伸至行高

ratio​

宽高比。当宽度或高度未定义时生效。

ratio = { 2, 1 } -- 宽高比 2:1